<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.name" clearable class="filter-item" style="width: 200px;" placeholder="请输入广告标题"/>
      <el-button
        v-permission="['GET /admin/ad/list']"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >查找
      </el-button>
      <el-button
        v-permission="['POST /admin/ad/create']"
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >添加
      </el-button>

    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :header-cell-style="{background:'#f5f5f5',color:'#333333',height:'50px'}"
              :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>

      <el-table-column align="center" label="广告ID" width="100" prop="id" sortable/>

      <el-table-column align="center" label="广告标题" prop="name"/>


      <el-table-column align="center" label="广告图片" prop="picUrl">
        <template slot-scope="scope">
          <el-image
            :src="thumbnail(scope.row.picUrl)"
            :preview-src-list="toPreview(scope.row, scope.row.picUrl)"
            style="width: 80px; height: 40px"
          />
        </template>
      </el-table-column>


      <el-table-column align="center" label="广告链接" prop="link"/>

      <el-table-column align="center" label="是否启用" prop="enabled">
        <template slot-scope="scope">
          <el-tag :type="scope.row.enabled ? 'success' : 'error' ">{{ scope.row.enabled ? '启用' : '不启用' }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="广告位置" prop="enabled">
        <template slot-scope="scope">
          <el-tag :type="scope.row.position ==1 ? 'success' : 'error' ">{{ scope.row.position==1 ? '首页' : '收费页' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            v-permission="['POST /admin/ad/update']"
            type="primary"
            size="mini"
            @click="handleUpdate(scope.row)"
          >编辑
          </el-button>
          <el-button
            v-permission="['POST /admin/ad/delete']"
            type="danger"
            size="mini"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <!-- 添加或修改对话框 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="1200px">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="dataForm"
        status-icon
        label-position="left"
        label-width="100px"
        style="width: 100%;padding-left: 50px;padding-right: 50px;"
      >
        <el-form-item label="广告标题" prop="name">
          <el-input v-model="dataForm.name"/>
        </el-form-item>
        <el-form-item label="广告图片" prop="picUrl">
          <el-upload
            :headers="uploadHeaders"
            :action="uploadPath"
            :show-file-list="false"
            :on-success="uploadUrl"
            :before-upload="checkFileSize"
            class="avatar-uploader"
            accept=".jpg,.jpeg,.png,.gif"
          >
            <img v-if="dataForm.picUrl" :src="dataForm.picUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"/>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1024kb</div>
          </el-upload>
        </el-form-item>


        <el-form-item label="广告排序" prop="sortOrder">
          <el-input-number v-model="dataForm.sortOrder" :step="10" style="width: 300px;">
          </el-input-number>
        </el-form-item>


        <el-form-item label="链接类型" prop="isOut">
          <el-radio-group v-model="dataForm.isOut">
            <el-radio :label="true">外部</el-radio>
            <el-radio :label="false">内部</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="活动链接" prop="link">
          <el-input v-model="dataForm.link"/>
        </el-form-item>
        <el-form-item label="是否启用" prop="enabled">
          <el-select v-model="dataForm.enabled" placeholder="请选择">
            <el-option :value="true" label="启用"/>
            <el-option :value="false" label="不启用"/>
          </el-select>
        </el-form-item>

        <el-form-item label="广告位置" prop="position">
          <el-select v-model="dataForm.position" placeholder="请选择">
            <el-option :value="1" label="首页"/>
            <el-option :value="2" label="收费页"/>
          </el-select>
        </el-form-item>


        <el-form-item label="服务详情" prop="detail">
          <editor v-model="dataForm.detail" :init="editorInit"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">确定</el-button>
        <el-button v-else type="primary" @click="updateData">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }

  .avatar {
    width: 145px;
    height: 145px;
    display: block;
  }
</style>

<script>
  import { listAd, createAd, updateAd, deleteAd } from '@/api/ad'
  import { uploadPath } from '@/api/storage'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import { thumbnail, toPreview } from '@/utils/index'
  import { uploadHeaders } from '../../utils/auth'
  import { createStorage } from '../../api/storage'
  import Editor from '@tinymce/tinymce-vue'

  export default {
    name: 'Ad',
    components: { Pagination, Editor },
    filters: {},
    data() {
      return {
        thumbnail,
        toPreview,
        uploadPath,
        list: [],
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
          name: undefined,
          sort: 'create_time',
          order: 'desc'
        },
        dataForm: {
          id: undefined,
          name: undefined,
          picUrl: undefined,
          link: undefined,
          enabled: true,
          sortOrder: 100,
          isOut: false,
          detail: ''
        },
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          update: '编辑',
          create: '创建'
        },
        rules: {
          sortOrder: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
          name: [
            { required: true, message: '标题不能为空', trigger: 'blur' }
          ],
          picUrl: [{ required: true, message: '图片不能为空', trigger: 'blur' }]
        },
        downloadLoading: false,
        editorInit: {
          language: 'zh_CN',
          height: '400px',
          convert_urls: false,
          plugins: [
            'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
          ],
          toolbar: [
            'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample ',
            'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor  fontsizeselect fontselect  backcolor fullscreen'
          ],
          images_upload_handler: function(blobInfo, success, failure) {
            const formData = new FormData()
            formData.append('file', blobInfo.blob())
            createStorage(formData)
              .then(res => {
                success(res.data.data.url)
              })
              .catch(err => {
                console.log(err.data.errmsg)
                failure(err.data.errmsg)
              })
          }
        }
      }
    },
    computed: {
      uploadHeaders
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        listAd(this.listQuery)
          .then(response => {
            this.list = response.data.data.list
            this.total = response.data.data.total
            this.listLoading = false
          })
          .catch(() => {
            this.list = []
            this.total = 0
            this.listLoading = false
          })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      resetForm() {
        this.dataForm = {
          id: undefined,
          name: undefined,
          picUrl: undefined,
          link: undefined,
          position: 1,
          enabled: true,
          sortOrder: 100,
          isOut: false,
          detail: ''
        }
      },
      handleCreate() {
        this.resetForm()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      uploadUrl: function(response) {
        console.log(response)
        this.dataForm.picUrl = response.data.url
      },
      checkFileSize: function(file) {
        if (file.size > 1048576) {
          this.$message.error(`${file.name}文件大于1024KB，请选择小于1024KB大小的图片`)
          return false
        }
        return true
      },
      createData() {
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            createAd(this.dataForm)
              .then(response => {
                this.handleFilter()
                this.dialogFormVisible = false
                this.$notify.success({
                  title: '成功',
                  message: '创建成功'
                })
              })
              .catch(response => {
                this.$notify.error({
                  title: '失败',
                  message: response.data.errmsg
                })
              })
          }
        })
      },
      handleUpdate(row) {
        this.resetForm()
        this.dataForm = Object.assign(this.dataForm, row)
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      updateData() {
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            updateAd(this.dataForm)
              .then(() => {
                this.handleFilter()
                this.dialogFormVisible = false
                this.$notify.success({
                  title: '成功',
                  message: '更新广告成功'
                })
              })
              .catch(response => {
                this.$notify.error({
                  title: '失败',
                  message: response.data.errmsg
                })
              })
          }
        })
      },
      handleDelete(row) {
        deleteAd(row)
          .then(response => {
            this.$notify.success({
              title: '成功',
              message: '删除成功'
            })
            this.handleFilter()
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.data.errmsg
            })
          })
      }

    }
  }
</script>
